<template>
  <div class="editDisHeader">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="390px"
               title="修改看板展示">
      <div style="margin-left: 10%;margin-top: 20px">
        <el-checkbox v-for="data in editData" v-model="data.check" :key="data.name">{{data.nameCn}}</el-checkbox>
      </div>
      <div style="text-align: center;margin-top: 20px">
        <el-button type="primary" @click="updateDisplay">提交</el-button>
        <el-button  @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'editGzHeader',
    props: [],
    data() {
      return {
        centerDialogVisible: false,
        clickModalHide: false,
        editData:[],
        count: 0,
      }
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("editGzDisHeader",function (val) {
        self.count = 0;
        self.centerDialogVisible = true;
        self.editData = val;
        for(let data of self.editData){
          self.$set(data,"check",data.display == 0)
        }
      })
    },

    methods: {

      handleHeader(){
        let params = [];
        for(let data of this.editData){
          let param = {id:"",display:""};
          param.id = data.id;
          param.display = data.check?"0":"-1";
          params.push(param)
        }
        return params;
      },

      updateDisplay() {
        let self = this;
        let param = self.handleHeader();
        if (this.count == 0) {
          self.$http({
            url: "/autoMonitor/gz/updateGzHeader",
            method: "post",
            data: JSON.stringify(param),
            dataType: 'json',
            contentType: "application/json",
          }).then(resp => {
            if (resp.success) {
              self.$eventBus.$emit("updateDisplayHeader");
              self.closeDialog();
              self.$notify({
                title: '提示',
                message: "修改成功！",
                type: 'success'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "修改失败",
              type: 'error'
            });
            this.count--;
          });
          this.count++;
        }
      },

      //关闭弹窗
      closeDialog() {
        this.centerDialogVisible = false;
      },

    },
    watch: {

    }
  }
</script>
<style scoped>
  .editDisHeader .el-dialog__body {
    padding: 0px 20px;
  }

  .editDisHeader .el-form-item {
    margin-bottom: 18px;
  }

</style>
